.DiffModal {
  // fix for buttons
  // on default Flarum theme
  @media @phone {
    & when (@config-colored-header = true) {
      & button > span, button > i {
        color: @text-color;
      }
    }
  }

  .Modal-header {
    text-align: left;
    background: @control-bg;

    time {
      font-size: 11px;
      font-weight: bold;
      text-transform: uppercase;
    }

    h3 {
      font-size: 14px;
    }

    // fix for username links
    // on default Flarum theme
    @media @phone {
      & when (@config-colored-header = true) {
        & a {
          color: @text-color;
        }
      }
    }
  }

  .controlsContainer {
    margin: 0 18px;
    text-align: center;
  }

  .Modal-body {
    background: @body-bg;
  }

  .DiffModal-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: fade(@body-bg, 90%);
    display: none;
    border-radius: @border-radius @border-radius 0 0;
    z-index: 999999;

    &.active {
      display: block;
    }
  }

  .Avatar {
    margin: -2px 5px -2px -6px;
    .Avatar--size(24px);
    @media @phone {
      margin-top: 10px;
      // fix for long usernames
      margin-left: 6px;
    }
  }

  // diff display
  .TheTurkDiff {
    &.CustomDiff.diff-wrapper {
      background-color: @overlay-bg;
      border-collapse: collapse;
      border-spacing: 0;
      font-family: 'Menlo', 'Consolas', monospace;
      font-size: 13px;
      empty-cells: show;
      width: 100%;
      word-break: break-word;

      & td {
        background: darken(@control-bg, 5%);
        padding: 10px;
      }

      &.diff-html {
        white-space: pre-wrap;

        & .change {
          & .old {
            border-left: 3px solid @diff-old-version-bg-color-border;
            background: @diff-old-version-bg-color;
          }

          & .new {
            border-left: 3px solid @diff-new-version-bg-color-border;
            background: @diff-new-version-bg-color;
          }

          & .rep {
            border-left: 3px solid @diff-change-version-del-color-border;
            background: @body-bg;
          }

          & .rep-del {
            border-left: 3px solid @diff-change-version-del-color-border;
            background: @diff-change-version-del-color;
          }

          & .rep-ins {
            border-left: 3px solid @diff-change-version-ins-color-border;
            background: @diff-change-version-ins-color;
          }

          &.change-eq {
            & .new,
            & .old {
              border-left: 3px solid @diff-info-color-border;
              background: @body-bg;
              color: @muted-color;
            }
          }

          ins {
            display: inline-block;
            margin-top: -1px;
            text-decoration: none;
            background-color: @diff-new-version-ins-color;
            border-radius: 0.2em;
            text-align: left;
          }

          del {
            display: inline-block;
            margin-top: -1px;
            text-decoration: none;
            background-color: @diff-old-version-del-color;
            border-radius: 0.2em;
          }
        }
      }
    }

    &.TabularDiff.diff-wrapper {
      text-align: left;
      border: 1px solid darken(@body-bg, 15%);
      border-radius: @border-radius @border-radius 0 0;

      & when (@config-dark-mode = true) {
        border-color: @control-bg;
      }

      & .diff-header {
        height: 35px;
        padding: 5px 10px;
        border-bottom: 1px solid darken(@body-bg, 10%);
        background-color: darken(@body-bg, 2%);
        border-radius: inherit;

        & when (@config-dark-mode = true) {
          border-color: @control-bg;
          background-color: lighten(@body-bg, 2%);
        }

        > .diff-heading-wrapper {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          width: 100%;
          font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
          font-size: 15px;

          > .diff-heading-icon {
            margin-right: 10px;
          }

          > .diff-heading-title {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow-x: hidden;
          }
        }
      }

      & .diff-block {
        overflow-y: hidden;
      }

      & .diff-blocks {
        display: block;
        width: 100%;
        height: 100%;
      }

      & .diff-table {
        width: 100%;
        border-collapse: collapse;
        font-family: 'Menlo', 'Consolas', monospace;
        font-size: 14px;

        tbody {
          background: @body-bg;
        }

        & .diff-code-line {
          display: inline-block;
          white-space: nowrap;
          /* Compensate for the absolute positioning of the line numbers */
          padding: 5px 8em;
        }

        & .diff-code-side-line {
          display: inline-block;
          white-space: nowrap;
          /* Compensate for the absolute positioning of the line numbers */
          padding: 5px 4.5em;
        }

        & .diff-code-line-prefix {
          display: inline;
          background: none;
          padding: 0;
          word-wrap: normal;
          white-space: pre;
        }

        & .diff-code-line-ctn {
          display: inline;
          background: none;
          padding: 0;
          word-wrap: normal;
          white-space: pre;
          overflow-x: auto;

          ins {
            display: inline-block;
            margin-top: -1px;
            text-decoration: none;
            background-color: @diff-new-version-ins-color;
            border-radius: 0.2em;
            text-align: left;
          }

          del {
            display: inline-block;
            margin-top: -1px;
            text-decoration: none;
            background-color: @diff-old-version-del-color;
            border-radius: 0.2em;
          }
        }

        & .diff-code-linenumber {
          box-sizing: border-box;
          width: 7.5em;
          /* Keep the numbers fixed on line contents scroll */
          position: absolute;
          display: inline-block;
          background-color: @body-bg;
          text-align: right;
          border: solid darken(@body-bg, 7%);
          border-width: 0 1px 0 0;
          cursor: pointer;
          padding: 5px 0;

          & when (@config-dark-mode = true) {
            border-color: @control-bg;
          }
        }

        & .diff-code-linenumber:after {
          content: '\200b';
        }

        & .diff-code-side-linenumber {
          /* Keep the numbers fixed on line contents scroll */
          position: absolute;
          display: inline-block;
          box-sizing: border-box;
          width: 4em;
          background-color: @body-bg;
          text-align: right;
          border: solid darken(@body-bg, 7%);
          border-width: 0 1px 0 1px;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 5px 0.5em 5px 0.5em;

          & when (@config-dark-mode = true) {
            border-color: @control-bg;
          }
        }

        & .diff-code-side-linenumber:after {
          content: '\200b';
        }

        & .diff-code-linenumber,
        & .diff-code-side-linenumber,
        & .diff-code-line-prefix {
          user-select: none;
        }

        & .diff-code-linenumber,
        & .diff-code-side-linenumber {
          direction: rtl;
        }

        & .line-num1 {
          box-sizing: border-box;
          float: left;
          width: 3.5em;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 0.5em 0 0.5em;
        }

        & .line-num2 {
          box-sizing: border-box;
          float: right;
          width: 3.5em;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 0.5em 0 0.5em;
        }

        /*
       * Changes Highlight
       */

        & .diff-del {
          background-color: @diff-old-version-bg-color;
          border-color: darken(@diff-old-version-bg-color, 10%);

          &.diff-change {
            background-color: @diff-change-version-del-color;
            border-color: darken(@diff-change-version-del-color, 10%);
          }
        }

        & .diff-ins {
          background-color: @diff-new-version-bg-color;
          border-color: darken(@diff-new-version-bg-color, 10%);

          &.diff-change {
            background-color: @diff-change-version-ins-color;
            border-color: darken(@diff-change-version-ins-color, 10%);
          }
        }

        & .diff-info {
          background-color: @diff-info-color;
          border-color: darken(@diff-info-color, 10%);
        }
      }

      & .diff-side-item {
        display: inline-block;
        overflow-x: scroll;
        overflow-y: hidden;
        width: 50%;
        margin-bottom: -4px;
      }

      &.diff-combined {
        & .diff-code-line {
          padding-left: 5px;
        }
      }
    }
  }
}
